<template>
  <div id="consumption" class="container">
    <div class="content consumption-title">
      <h2>{{ currentTab.label }}</h2>
    </div>
    <div class="content" v-if="currentType.name === 'consumption'">
      <h3>统计信息</h3>
      <div class="statistical-information">
        <div class="statistical-item">
          <p>￥{{ customerOrderStatities.totalAmount }}</p>
          <p>消费金额</p>
        </div>
        <div class="statistical-item">
          <p>{{ customerOrderStatities.orderCount }}</p>
          <p>订单数量</p>
        </div>
        <div class="statistical-item">
          <p>￥{{ customerOrderStatities.avgAmount }}</p>
          <p>客单价</p>
        </div>
        <div class="statistical-item">
          <p>{{ customerOrderStatities.aftermarketCount }}</p>
          <p>售后次数</p>
        </div>
        <div class="statistical-item">
          <p>{{ customerOrderStatities.refundCount }}</p>
          <p>退货记录</p>
        </div>
        <div class="statistical-item">
          <p>￥{{ customerOrderStatities.refundAmount }}</p>
          <p>退款金额</p>
        </div>
        <!-- <div class="statistical-item">
          <p>{{ customerOrderStatities.collectGoodsCount }}</p>
          <p>收藏商品</p>
        </div>
        <div class="statistical-item">
          <p>{{ customerOrderStatities.couponCount }}</p>
          <p>优惠券（张）</p>
        </div>
        <div class="statistical-item">
          <p>{{ customerOrderStatities.evaluateCount }}</p>
          <p>商品评价</p>
        </div> -->
      </div>
    </div>
    <div class="content">
      <h3 style="display:flex;  justify-content: space-between; align-items: center;">
        列表数据
        <el-button
          type="primary"
          class="add-order"
          @click="goAddOrder"
          v-if="currentType.name === 'consumption'"
          >新增</el-button
        >
        <el-button
          type="primary"
          class="add-order"
          @click="followUpBtn('新增跟进记录')"
          v-if="currentType.name === 'followUp'"
          >新增</el-button
        >
      </h3>
      <lb-table
        :column="tableColumn"
        :data="list"
        :pagination="list.length > 0 ? true : false"
        :total="page.totalNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 30, 50]"
        :current-page.sync="page.currentPage"
        :page-size="page.pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      >
      </lb-table>
    </div>
    <!-- ============================= el-dialog ============================= -->
    <!-- <el-dialog
      :visible.sync="dialogFollowUpvisible"
      :append-to-body="true"
      title="新增跟进记录"
      width="620px"
      class="follow-up-dialog"
    >
      <template>
        <el-form :model="followUp" :rules="rules" ref="followUp">
          <el-form-item label="跟进人:" prop="customerName" label-width="110px">
            <el-input
              style="width: 100%"
              v-model="followUp.customerName"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="接听状态:"
            prop="receiveState"
            label-width="110px"
          >
            <el-radio-group
              v-model="followUp.receiveState"
              @change="answerStatus"
            >
              <el-radio label="0">无</el-radio>
              <el-radio label="1">接通</el-radio>
              <el-radio label="2">未接通</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="接听状况:"
            label-width="110px"
            :prop="receiveDetailsState"
            ref="condition"
          >
            <el-select
              style="width: 100%"
              v-model="followUp.receiveDetails"
              filterable
              placeholder="请选择接听状况"
              clearable
              :disabled="answerState"
              :default-first-option="true"
            >
              <el-option
                v-for="items in answerStateDate.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="微信添加状态:"
            prop="wxFencing"
            label-width="110px"
          >
            <el-radio-group v-model="followUp.wxFencing" @change="wxAddState">
              <el-radio label="3">已添加</el-radio>
              <el-radio label="4">未添加</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="微信状况:" prop="wxDetails" label-width="110px">
            <el-select
              style="width: 100%"
              v-model="followUp.wxDetails"
              filterable
              placeholder="请选择微信状况"
              clearable
              :default-first-option="true"
            >
              <el-option
                v-for="items in wxAddStateData.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" label-width="110px">
            <el-input
              type="textarea"
              v-model="followUp.comment"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>

          <div style="float: right; padding-bottom: 20px">
            <el-button @click="dialogFollowUpvisible = false">取 消</el-button>
            <el-button type="primary" @click="subFollowUp('followUp')"
              >确 定</el-button
            >
          </div>
        </el-form>
      </template>
    </el-dialog> -->

     <el-drawer
      title="新增跟进记录"
      :visible.sync="drawer"
      :direction="direction"
      append-to-body
      :before-close="handleClose">
        <el-form :model="followUp" :rules="rules" ref="followUp">
          <el-form-item label="跟进人:" prop="customerName" label-width="110px">
            <el-input
              style="width: 100%"
              v-model="followUp.customerName"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="接听状态:"
            prop="receiveState"
            label-width="110px"
          >
            <el-radio-group
              v-model="followUp.receiveState"
              @change="answerStatus"
            >
              <el-radio label="0">无</el-radio>
              <el-radio label="1">接通</el-radio>
              <el-radio label="2">未接通</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="接听状况:"
            label-width="110px"
            :prop="receiveDetailsState"
            ref="condition"
          >
            <el-select
              style="width: 100%"
              v-model="followUp.receiveDetails"
              filterable
              placeholder="请选择接听状况"
              clearable
              :disabled="answerState"
              :default-first-option="true"
            >
              <el-option
                v-for="items in answerStateDate.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="微信添加状态:"
            prop="wxFencing"
            label-width="110px"
          >
            <el-radio-group v-model="followUp.wxFencing" @change="wxAddState">
              <el-radio label="3">已添加</el-radio>
              <el-radio label="4">未添加</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="微信状况:" prop="wxDetails" label-width="110px">
            <el-select
              style="width: 100%"
              v-model="followUp.wxDetails"
              filterable
              placeholder="请选择微信状况"
              clearable
              :default-first-option="true"
            >
              <el-option
                v-for="items in wxAddStateData.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" label-width="110px">
            <el-input
              type="textarea"
              v-model="followUp.comment"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
          <div v-if="parArray.indexOf('template_send') != -1">
             <div class="titleCss">
            发送短信
          </div>
          <el-form-item
            label="发送短信:"
            label-width="110px"
            prop="sendMessageFlag"
          >
            <el-radio-group v-model="followUp.sendMessageFlag"  @change="handlerSendRadio">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模板:" :prop="templateIdProp" label-width="110px" v-if="followUp.sendMessageFlag=='1'">
            <el-select v-model="followUp.templateId"  @change="selectTemplate" clearable  placeholder="请选择模板" style="width: 100%">
              <el-option
                v-for="item in templateOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
          <div class="templateDiv"  v-if="templateCenter">
            <p>{{templateCenter}}</p>
          </div>
        </el-form-item>
        <div v-if="followUp.paramList.length != 0">
          <el-form-item label-width="110px" label="参数"  v-for="(item,index) in customerMessage" :key="index" >
            <span slot="label">
              参数{{index+1}}：
            </span>
            <el-radio-group v-model="followUp.paramList[index].paramType" @change="messageModel(index,followUp.paramList[index].paramType)">
                <el-radio  label="1">客户信息</el-radio>
                <el-radio  label="2">自定义信息</el-radio>
            </el-radio-group>
              <el-input
                v-if="followUp.paramList[index].paramType=='2'"
                class="input-new-tag"
                v-model="followUp.paramList[index].paramContent"
                ref="saveTagInput"
                placeholder="请输入客户信息"
              >
              </el-input>
              <el-select v-model="followUp.paramList[index].paramContent"  clearable  placeholder="请选择客户信息" v-if="followUp.paramList[index].paramType=='1'">
                  <el-option
                    v-for="(item,index) in dictionaries.message_customer_user_info"
                    :key="index"
                    :label="item.dictName"
                    :value="item.dictId">
                  </el-option>
              </el-select>

          </el-form-item>
        </div>
         <el-form-item label="模板签名:" :prop="signNameProp" label-width="110px"  v-if="followUp.sendMessageFlag=='1'">
            <el-select v-model="followUp.signName" clearable  placeholder="请选择模板签名" style="width: 100%">
              <el-option
                v-for="(item, index) in dictionaries.message_sign_type"
                :key="index"
                :label="item.dictName"
                :value="item.dictId">
              </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="" label-width="110px"  >
         <el-checkbox v-if="followUp.sendMessageFlag=='1'"
              v-model="followUp.defFlag"
              :false-label="0"
              :true-label="1"
              @change='handlerCheckbox'
              >设为默认
            </el-checkbox>
        </el-form-item>
          </div>

          <div style="float: right; padding-bottom: 20px">
            <el-button class="cancel" @click="handlerQuxiao">取 消</el-button>
            <el-button  class="affirm" type="primary" @click="subFollowUp('followUp')"
              >确 定</el-button
            >
          </div>
        </el-form>
      </el-drawer>
  </div>
</template>

<script>
import LbTable from '../../../components/lb-table/lb-table'
export default {
  components: { LbTable },
  props: {
    customerId: String,
    currentTab: {
      type: Object,
      default: () => { }
    },
    currentList: {
      type: Array,
      default: () => []
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    clientName: String
  },
  data () {
    return {
      lastTime: 0, // 防抖
      dataWarning: false,
      customerMessage: '',
      limits: '',
      parArray: [],
      templateIdProp: '',
      signNameProp: '',
      templateCenter: '',
      templateOptions: '',
      customerData: [],
      dictionaries: { // 字典数据
        message_object_type: [], // 发送对象
        message_crowd_type: [], // 人群类型
        message_sign_type: [], // 消息签名
        customer_type: [],
        tractring_record_type: [],
        message_customer_user_info: []

      },
      drawer: false,
      direction: 'rtl', // 抽屉打开方式
      customerOrderStatities: {}, // 消费记录-统计信息
      list: [], // 订单分页列表
      column: {},
      page: { pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      currentType: {},
      count: 0, // 限制多次重复请求
      dialog: { visible: false, title: '编辑', type: '' },
      form: {
        name: '', // 公司名称 string
        simpleName: '', // 公司简称 string
        sort: '', // 序号 int
        status: '' // 状态（字典分组：enable_status） int
      },
      followUp: { // 新增跟进记录
        customerName: '',
        trackingId: '',
        receiveState: '', // 接听状态：0-> 无；1-> 接通；2-> 未接通；
        receiveDetails: '', // 接听状况：字典获取，receive_details
        wxFencing: '', // 微信添加状态0-> 已添加；1-> 未添加；
        wxDetails: '', // 微信状况：字典获取：wx_details
        sendMessageFlag: '', // 是否发送短信
        templateId: '', // 模板
        signName: '', // 模板签名
        defFlag: '',
        comment: '', // 备注
        paramList: []

      },
      seckillPrice: false, // 跟进弹框内的秒杀价格输入框状态
      answerState: false, // 跟进弹框内的接听状况
      dialogFollowUpvisible: false,
      rules: {
        customerName: [
          { required: true, message: '请输入跟进人', trigger: 'change' }
        ],
        spiked: [
          { required: true, message: '请选择有无秒杀', trigger: 'change' }
        ],
        receiveState: [
          { required: true, message: '请选择接听状态', trigger: 'change' }
        ],
        receiveDetails: [
          { required: true, message: '请选择接听状况', trigger: 'change' }
        ],
        wxFencing: [
          { required: true, message: '请选择微信添加状态', trigger: 'change' }
        ],
        wxDetails: [
          { required: true, message: '请选择微信状况', trigger: 'change' }
        ],
        templateId: [
          { required: true, message: '请选择模板', trigger: 'change' }
        ],
        signName: [
          { required: true, message: '请选择模板前面', trigger: 'change' }
        ],
        sendMessageFlag: [
          { required: true, message: '请选择是否发送短信', trigger: 'change' }
        ]
      },
      answerStateDate: '',
      userInfo: {},
      wxAddStateData: '', // 微信状况
      tractringData: [],
      receiveDetailsState: 'receiveDetails',
      userId: ''

    }
  },
  created () {
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'myCustomersCode'
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.userId = JSON.parse(sessionStorage.getItem('user_id'))

    console.log(this.userInfo, 'this.followUp.customerName')
    this.followUp.customerName = this.userInfo.reallyName
    this.getTractring()
    this.getTemplateDataList()
    for (const type in this.dictionaries) { this.getDictionaries(type) }
  },
  mounted () {
    this.currentType = this.currentTab
    // console.log(this.page.type)
    this.fetchData(this.currentTab.name) // 获取消费记录
  },
  watch: {
    currentTab: {
      handler (newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.currentType = newVal
        this.fetchData(newVal.name)
      },
      deep: true
    },
    followUp: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
        if (newVal.sendMessageFlag == '1') {
          this.templateIdProp = 'templateId'
          this.signNameProp = 'signName'
        }
      },
      deep: true // 为true，表示深度监听
    }

  },
  methods: {
    messageModel (index, type) {
      console.log(index, type, 'index,type')
      this.followUp.paramList[index].paramContent = ''
      // if(this.paramList[index]){

      // }
    },
    handlerQuxiao () {
      this.templateCenter = ''
      this.followUp.templateId = ''// 模板
      this.followUp.customerName = ''
      this.followUp.trackingId = ''
      this.followUp.spiked = ''// 是否秒杀：0->无；1->秒杀；
      this.followUp.spikeMoney = '' // 秒杀金额，可填空，浮点型
      this.followUp.receiveState = ''// 接听状态：0-> 无；1-> 接通；2-> 未接通；
      this.followUp.receiveDetails = '' // 接听状况：字典获取，receive_details
      this.followUp.wxFencing = ''// 微信添加状态0-> 已添加；1-> 未添加；
      this.followUp.wxDetails = ''// 微信状况：字典获取：wx_details
      this.followUp.sendMessageFlag = ''// 是否发送短信
      this.followUp.wxFencing = ''
      this.followUp.signName = '' // 模板签名
      this.followUp.defFlag = '' // 是否设为默认
      this.drawer = false
    },
    // 设为默认
    handlerCheckbox (e) {
      console.log(e)
    },
    // 获取状态字典数据
    getDictionaries (type) {
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        console.log(res, 'resresres')
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取模板数据
    getTemplateDataList () {
      const data = {
      }
      this.$api.templateDataList(data).then((res) => {
        if (res.code == 0) {
          console.log(res, 'res')
          this.templateOptions = res.data
        }
      })
    },
    // 模板选择
    selectTemplate (id) {
      console.log(id)
      if (id) {
        this.templateCenter = this.templateOptions.find(e => { return e.id == id }).content
        this.customerMessage = this.templateOptions.find(e => { return e.id == id }).paramNum

        console.log(this.templateCenter, 'this.templateCenter')
        const tempArr = []
        for (let index = 1; index <= this.customerMessage; index++) {
          const obj = {
            paramType: '1',
            paramContent: ''
          }
          tempArr.push(obj)
        }
        this.followUp.paramList = tempArr
      } else {
        this.templateCenter = ''
      }
    },
    // 发送短信单选
    handlerSendRadio (e) {
      console.log(e)
      const templateId = localStorage.getItem('templateIdDetails')
      const signName = localStorage.getItem('signNameDetails')
      const defFlag = localStorage.getItem('defFlagDetails')

      // console.log(this.followUp.send)
      if (e == 0) {
        this.followUp.templateId = ''
        this.followUp.signName = ''
        this.templateCenter = ''
        this.followUp.defFlag = '' // 是否设为默认
        this.templateIdProp = 'templateIdProp'
        this.signNameProp = 'signNameProp'
      } else {
        if (templateId && signName) {
          this.followUp.templateId = Number(templateId)
          this.followUp.signName = signName
          this.followUp.defFlag = Number(defFlag)
          this.templateCenter = this.templateOptions.find(e => { return e.id == this.followUp.templateId }).content
        }
        this.templateIdProp = 'templateId'
        this.signNameProp = 'signName'
      }
    },
    // 右侧抽屉关闭
    handleClose (done) {
      done()
    },
    // 微信添加状态
    wxAddState (e) {
      console.log(e)
      const params = {
        pageNo: 1,
        pageSize: 1000,
        name: '',
        status: e
      }
      this.$api.getFollowUpRecord(params).then((res) => {
        console.log(res, 'resssssssssss')
        if (res.code == 0) {
          // this.wxAddStateData = res.data;
          this.$set(this, 'wxAddStateData', res.data)
          this.$set(this.followUp, 'wxDetails', '')
        }
      })
    },
    // 跟进弹框接听状态
    answerStatus (e) {
      if (e == 0) {
        this.answerState = true // 禁用
        this.receiveDetailsState = 'niubi'
        this.answerStateDate = []
        this.$set(this.followUp, 'receiveDetails', '')
      } else if (e == 1 || e == 2) {
        this.answerState = false// 不禁用
        this.getAnswerState(e)
        this.receiveDetailsState = 'receiveDetails'
      }
    },
    // 接听状况
    getAnswerState (state) {
      const params = {
        pageNo: 1,
        pageSize: 1000,
        name: '',
        status: state
      }
      this.$api.getFollowUpRecord(params).then((res) => {
        if (res.code == 0) {
          // this.answerStateDate = res.data;
          this.$set(this, 'answerStateDate', res.data)
          this.$set(this.followUp, 'receiveDetails', '')

          //  this.$refs['condition'].resetField()
        }
      })
    },
    // 跟进按钮
    followUpBtn () {
      const templateIdDetails = localStorage.getItem('templateIdDetails')
      const signNameDetails = localStorage.getItem('signNameDetails')
      const defFlagDetails = localStorage.getItem('defFlagDetails')
      console.log(templateIdDetails, signNameDetails, defFlagDetails)
      if (templateIdDetails && signNameDetails) {
        this.$nextTick(() => {
          this.followUp.templateId = Number(templateIdDetails)
          this.followUp.signName = signNameDetails
          this.followUp.defFlag = Number(defFlagDetails)
          this.templateCenter = this.templateOptions.find(e => { return e.id == this.followUp.templateId }).content
        })
      }
      this.drawer = true
      this.followUp.sendMessageFlag = '0'// 是否发送短信
      this.followUp.customerName = this.userInfo.reallyName
      this.$nextTick(() => {
        this.$refs['followUp'].clearValidate()
      })

      // this.followUpDateList = row
    },
    // 跟进类型数据
    getfollowUpList () {
      const data = {
        name: '',
        pageNo: 1,
        pageSize: 10
      }
      this.$api.customerGetFollowUp(data).then((res) => {
        if (res.code == 0) {
          this.followUpData = res.data.list
        }
      }).catch((err) => { console.log(err) })
    },
    submitData () {
      if (this.customerMessage > 0) {
        this.followUp.paramList.forEach((item) => {
          if (item.paramContent == '') {
            this.dataWarning = false
          } else {
            this.dataWarning = true
          }
        })
      }

      if (this.customerMessage > 0 && this.dataWarning == false) {
        return this.$message.warning('请填写选择对应模板后的参数！')
      }
      if (this.followUp.defFlag == 1) {
        localStorage.setItem('templateIdDetails', this.followUp.templateId)
        localStorage.setItem('signNameDetails', this.followUp.signName)
        localStorage.setItem('defFlagDetails', this.followUp.defFlag)
      } else {
        localStorage.removeItem('templateIdDetails')
        localStorage.removeItem('signNameDetails')
        localStorage.removeItem('defFlagDetails')
      }
      let data = {
        userId: this.customerId, // 客户id
        customerId: this.userInfo.id // 登录的用户id
      }
      data = Object.assign(data, this.followUp)
      this.$api.customerAddFollowUp(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('新增成功！')
          this.$refs['followUp'].resetFields()
          this.followUp.paramList = []
          this.templateCenter = ''
          this.drawer = false

          this.fetchData()
        }
      }).catch((err) => { console.log(err) })
    },
    // 跟进记录选择提交
    subFollowUp (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          // 获取当前时间的时间戳
          const now = new Date().valueOf()
          // 第一次点击
          if (this.lastTime == 0) {
            that.submitData()
            that.lastTime = now
          } else {
            if ((now - that.lastTime) > 5000) {
            // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
              that.lastTime = now
              that.submitData()
            // 添加自己要调用的方法
            } else {
              console.log('不触发')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getTractring () {
      this.axios
        .get('/sys/v1/common/by/group?groupId=' + 'tractring_record_type', {
          headers: {
            isLoading: false
          }
        }).then((res) => {
          if (res.code == 0) {
            console.log(res, '字典数据')
            this.tractringData = res.data
          }
        })
    },
    fetchData (name) {
      console.log(name)
      // if(this.count > 0){return} // 限制多次重复请求
      let getDataFun
      const type = name || this.currentType.name
      switch (type) {
        // 获取消费记录
        case 'consumption':
          // this.column = columnConsumption
          getDataFun = this.$api.customerOrderPageList
          this.getCustomerOrderStatistics() // 消费记录-统计信息查询接口
          break
        // 分配记录
        case 'allocation':
          // this.column = columnAllocation
          getDataFun = this.$api.customerAllocationList
          break
        // 跟进记录
        case 'followUp':
          // this.column = columnFollowUp
          getDataFun = this.$api.customerTrackingPageList
          break
        // 客户记录
        case 'record':
          // this.column = columnRecord
          getDataFun = this.$api.customerHistoryPageList
          break
        // 标签/人群
        default:
        // console.log("标签/人群")
        // console.log("客户详情")
      }
      if (getDataFun) {
        let params = {
          id: this.customerId,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize

        }
        if (this.currentType.name === 'allocation') {
          params = {
            request:
            {
              customerId: this.customerId,
              pageNo: this.page.pageNo,
              pageSize: this.page.pageSize
            },

            version: ''
          }
        }
        getDataFun(params).then((res) => {
          console.log(res, 'fenpeijlu')
          // this.list = res.data.list
          res.data.list.forEach(res => {
            if (res.receiveState) {
              res.receiveState = this.tractringData.find((e) => e.dictId == res.receiveState).dictName
            }
            if (res.wxFencing) {
              res.wxFencing = this.tractringData.find((e) => e.dictId == res.wxFencing).dictName
            }
            if (res.userId == this.userId) {
              res.isShow = true
            } else {
              res.isShow = false
            }
          })
          this.list = res.data.list
          console.log(this.list, ' this.list66666')

          this.page.totalNum = res.data.totalNum
          this.count++
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.fetchData()
    },
    handleSizeChange (sizeChange) {
      this.page.pageSize = sizeChange
      this.fetchData()
    },
    // 消费记录-统计信息查询接口
    getCustomerOrderStatistics () {
      const params = { id: this.customerId }
      this.$api.customerOrderStatistics(params).then((res) => {
        if (res.code === 0) {
          this.customerOrderStatities = res.data
          // console.log(this.customerOrderStatities)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 跳转到【创建订单】页面
    goAddOrder (row) {
      this.$router.push({
        name: 'add_order',
        query: {
          userId: this.customerId,
          pingZ: true
        }
      })
    },
    // 跳转到【订单】详情
    goOrderDetail (row) {
      console.log('跳转到【订单】详情')
      this.$router.push({
        name: 'returned',
        query: {
          exType: 0, // 0-退货订单,1 - 被退货,拒收
          orderType: 2, // 订单类型 exType = 1（(拒收)0:拒收 1:被退货） 退货（1微商 2客户）
          id: row.id,
          fixDetail: 2 // param 1修改 2详情
        }
      })
    },
    // 显示  dialog
    showDialog (title, type, row) {
      console.log(title, type, row)
      this.dialog.visible = true
      this.dialog.title = title
      // this.dialog.type = type
      // this.currentRow = row
      this.form = {
        name: '', // 公司名称 string
        simpleName: '', // 公司简称 string
        sort: '', // 序号 int
        status: '' // 状态（字典分组：enable_status） int
      }
    },
    // 添加跟进记录
    addFollowUp () {
      console.log('添加跟进记录')
    }

  }
}
</script>
<style lang="scss">
#consumption {
  .content {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff;
    h3 {
      margin-bottom: 10px;
    }
    .statistical-information {
      display: flex;
      width: 100%;
      border-radius: 8px;
      .statistical-item {
        padding: 10px;
        border-radius: 8px;
        margin-right: 20px;
        background-color: rgba(242, 245, 252, 1);
        flex: 1;
        &:last-child{margin-right: 0;}
        p {
          text-align: center;
          font-size: 16px;
          color: #666666;
          &:first-child {
            font-weight: bold;
            font-size: 24px;
            color: #4168e7;
            margin-bottom: 10px;
            border-bottom: 2px solid #e8eaec;
          }
        }
      }
    }
  }
}
.add-order {
  float: right;
}
.consumption-title{
  margin-top: 10px;
  margin-bottom: 24px;
  padding: 0 20px!important;
  h2{
    position: relative;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    padding-bottom: 0;
    padding-left: 14px;
    &:before{
      top:18px!important;
      width: 4px;
      height: 16px!important;
      position: absolute;
      left: 0;
      display: inline-block;
      content: "";
      background-color: #4c81eb;

    }
  }
}
.follow-up-dialog{
  .el-dialog__body{
    padding: 30px;
  }
}
.el-drawer__body{
  padding: 0 20px 0 24px;
  box-sizing: border-box;
}
.cancel{
  width: 120px;
  height: 36px;
  border: 1px solid #D9D9D9;
  opacity: 1;
  border-radius: 4px;
}
.affirm{
  width: 120px;
  height: 36px;
  background: #4168E7;
  opacity: 1;
  border-radius: 4px;
}
.templateDiv{
  padding: 12px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  background: #F5F8FF;
  margin-top: 12px;
}
.el-drawer__open .el-drawer.rtl{
  border-radius: 2%;
}
</style>
